<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>Vue动画封装</title>
	<script type="text/javascript" src="./vue.js"></script>
</head>
<body>	
	<div id="app">
		<fade :show = "show">
			<div>hello world</div>
		</fade>
		<fade :show="show">
			<h1>bye bye</h1>
		</fade>
		<button @click="handleToogle">toggle</button>
	</div>
	<script>
		Vue.component('fade' , {
			props : ['show'],
			template : 
			`
			<transition @before-enter="handleBeforeEnter" 
						@enter="handleEnter" 
						@after-enter="handleAfterEnter">
				<slot v-if="show"></slot>
			</transition>
			`,
			methods : {
				handleBeforeEnter : function(el) {
					el.style.color = "red";
				},
				handleEnter : function(el , done) {
					setTimeout(() => {
						el.style.color = "green";
					} , 2000);
					setTimeout(() => {
						done();
					},2000);
				},
				handleAfterEnter : function(el) {
					setTimeout(() => {
						el.style.color = "black";
					},2000);
				}
			}
		});

		var app = new Vue({
			el : '#app' ,
			data : {
				show : false
			},
			methods : {
				handleToogle : function() {
					this.show = !this.show;
				}
				
			}
		});
	</script>
</body>
</html>